<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules">
                    <a-form-model-item style="display: none">
                        <a-input v-model="mdl.id"/>
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.paraName','参数名称')" prop="i18nJson">
                                <rx-input-i18n :placeholder="i18n('form.paraName','参数名称','input')"
                                             v-model="mdl.i18nJson"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('group','分组')" prop="groupId">
                                <a-select :placeholder="i18n('group','分组','select')" v-model="mdl.groupId" :getPopupContainer="p=>p.parentNode" allowClear
                                          @change="selectGroup">
                                    <a-select-option v-for="group in groups" :value="group.id" :key="group.id">{{group.name}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.controlType','控件类型')" prop="ctltype">
                                <a-select :placeholder="i18n('form.controlType','控件类型','select')" v-model="mdl.ctltype" :getPopupContainer="p=>p.parentNode" allowClear @change="ctltypeChange">
                                    <a-select-option v-for="ctl in ctltypes" :value="ctl.key" :key="ctl.key">{{ctl.name}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.dataType','数据类型')" prop="dataType">
                                <a-select :placeholder="i18n('form.dataType','数据类型','select')" v-model="mdl.dataType" :getPopupContainer="p=>p.parentNode" allowClear  :disabled="mdl.ctltype!='text'">
                                    <a-select-option v-for="type in dataTypesTmp" :value="type.key" :key="type.key">{{type.name}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <div v-if="mdl.ctltype=='select'||mdl.ctltype=='radio'">
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.sourceType','来源类型')">
                                    <a-select v-model="from" style="width: 100%">
                                        <a-select-option value="custom">{{i18n('custom','自定义')}}</a-select-option>
                                        <a-select-option value="dic">{{i18n('dataDictionary','数据字典')}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row v-if="from=='custom'">
                            <a-col :span="24">
                                <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('list.xAttrs','扩展属性')" prop="extJson">
                                    <a-radio-group>
                                        <a-radio-button value="default" @click="addRows">{{i18n('increase','添加')}}</a-radio-button>
                                        <a-radio-button value="default" @click="removeRows">{{$ti18('rxList.delBtn','删除')}}</a-radio-button>
                                    </a-radio-group>
                                    <a-table :data-source="setting" :pagination="false" :row-selection="rowSelection">
                                        <a-table-column :title="$ti18('rxForm.name','名')" dataIndex="name">
                                            <template slot-scope="text, record">
                                                <a-input v-model="record.name" ></a-input>
                                            </template>
                                        </a-table-column>
                                        <a-table-column :title="i18n('list.value','值')" dataIndex="value">
                                            <template slot-scope="text, record">
                                                <a-input v-model="record.value"></a-input>
                                            </template>
                                        </a-table-column>
                                    </a-table>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row v-if="from=='dic'">
                            <a-col :span="24">
                                <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('dataDictionary','数据字典')" prop="extJson">
                                    <a-tree-select v-model="dicKey"  :treeData="dicTree"></a-tree-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import OsPropertiesDefApi from '@/api/user/org/osPropertiesDef'
    import osPropertiesGroupApi from '@/api/user/org/osPropertiesGroup'
    import {BaseFormModel, RxDialog,Util} from "@lowcode/jpaas-common-lib";
    import SysTreeApi from "@/api/system/core/sysTree";

    export default {
        name: 'OsPropertiesDefEdit',
        mixins: [BaseFormModel],
        components: {
            RxDialog,
        },
        computed: {
            rowSelection() {
                return {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: this.onSelectChange
                }
            }
        },
        data() {
            return {
                groups: [],
                ctltypes: [{key: "text", name: this.i18n('textControl','文本控件')}, {key: "date", name: this.i18n('dateControl','时间控件')}, {key: "select", name: this.i18n('dropDownBox','下拉框')},{key: "radio", name: this.i18n('radio','单选框')}],
                dataTypes: [{key: "varchar", name: this.i18n('varchar','字符串')}, {key: "number", name: this.i18n('number','数字')}, {key: "date", name: this.i18n('date','日期')}],
                dataTypesTmp:[{key: "varchar", name: this.i18n('varchar','字符串')}, {key: "number", name: this.i18n('number','数字')}],
                rules: {
                    i18nJson: [{required: true, message: this.i18n('form.paraName','参数名称','input'), trigger: 'change'}],
                    groupId: [{required: true, message: this.i18n('group','分组','select'), trigger: 'change'}],
                    ctltype: [{required: true, message: this.i18n('form.controlType','控件类型','select'), trigger: 'change'}],
                    dataType: [{required: true, message: this.i18n('form.dataType','数据类型','select'), trigger: 'change'}],
                    extJson: [{required: false, message: this.i18n('list.xAttrs','扩展属性','select'), trigger: 'change'}],
                },
                setting: [],
                selectedRowKeys:[],
                mdl:{
                    groupId:"",
                    dataType:"",
                    i18nJson:"",
                    ctltype:"",

                },
                from:"custom",
                dicTree:[],
                dicKey:"",
            }
        },
        created() {
            this.getPropertiesGroup();
            this.loadDicTree();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"osPropertiesDef",key);
            },
            getPropertiesGroup() {
                osPropertiesGroupApi.query({}).then(res => {
                    this.groups = res.data;
                });
            },
            onload_(values){
                if(values){
                    let extJson=JSON.parse(values.extJson);
                    if(!extJson || !extJson.from){
                        this.from="custom";
                        this.setting=extJson;
                    }else {
                        this.from=extJson.from;
                        if(this.from=="custom"){
                            this.setting=extJson.setting;
                        }else if(this.from=="dic"){
                            this.dicKey=extJson.setting;
                        }
                    }
                }
            },
            get(id) {
                return OsPropertiesDefApi.get(id);
            },
            save(values) {
                let extJson={
                    from:this.from,
                    setting:""
                }
                if(this.from=="custom"){
                    for(var j=this.setting.length-1;j>=0;j--){
                        if (this.setting[j].name==''&&this.setting[j].value==''){
                            this.setting.splice(j,1);
                        }
                    }
                    extJson.setting=this.setting;
                }else {
                    extJson.setting=this.dicKey;
                }
                values.extJson= JSON.stringify(extJson);
                return OsPropertiesDefApi.save(values);
            },
            selectGroup(groupId) {
                osPropertiesGroupApi.get(groupId).then(res => {
                    if (res.data.dimId) {
                        this.mdl.dimId = res.data.dimId;
                    } else {
                        this.mdl.dimId = "-1";
                    }
                });
            },
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            addRows(){
                var obj = {
                    name: "",
                    value: ""
                };
                this.setting.push(obj);
            },
            removeRows(){
                for(var i=this.selectedRowKeys.length-1;i>=0;i--){
                    this.setting.splice(this.selectedRowKeys[i],1);
                }
                this.selectedRowKeys=[];
            },
            ctltypeChange(ctl){
                if(ctl=="text"){
                    this.dataTypesTmp=[{key: "varchar", name: this.i18n('varchar','字符串')}, {key: "number", name: this.i18n('number','数字')}];
                    this.mdl.dataType="";
                }else if(ctl=="date") {
                    this.dataTypesTmp=[{key: "date", name: this.i18n('date','日期')}];
                    this.mdl.dataType="date";
                }else {
                    this.dataTypesTmp=[{key: "varchar", name: this.i18n('varchar','字符串')}];
                    this.mdl.dataType="varchar";
                }
            },
            loadDicTree(){
                var appId=this.curApp ? this.curApp.appId : "";
                SysTreeApi.listDicTree(appId).then(res => {
                    var cloneData = [];
                    res.forEach(function(item) {
                        cloneData.push({
                            title: item.name,
                            key: item.treeId,
                            value: item.alias,
                            parentId: item.parentId
                        })
                    })
                    var treeData=Util.listToTree(cloneData,"key","parentId");
                    this.dicTree = treeData;
                })
            }
        }
    }
</script>
